<template>
  <div class="pop-up">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="600px"
      destroy-on-close
    >
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.title"
            autocomplete="off"
            @change="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限值" :label-width="formLabelWidth">
          <el-input
            v-model="form.permission"
            autocomplete="off"
            @change="$forceUpdate()"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="activeRole">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "rolePopUp",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        id: null,
        permission: "",
        title: "",
      },
      title: "新增角色",
    };
  },
  methods: {
    visbleUp(obj) {
      this.form.title = "";
      this.form.permission = "";
      this.dialogFormVisible = true;
      console.log(obj);

      if (obj.id) {
        this.title = "修改角色";
        this.form.permission = obj.permission;
        this.form.title = obj.title;
        this.form.id = obj.id;
        console.log(this.form);
      }
    },
    cancel() {
      this.dialogFormVisible = false;
      this.form.title = "";
      this.form.permission = "";
    },

    activeRole() {
      console.log(this.form);
      this.$emit("addTable", this.form);
      this.dialogFormVisible = false;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style lang="less" scoped>
.el-form-item /deep/ .el-form-item__label {
  width: 80px !important;
}
.el-form-item /deep/ .el-form-item__content {
  margin-left: 80px !important;
}
.el-dialog {
  border-radius: 8px;
}
</style>
